<script src="../main.js"></script>
<script src="../router/index.js"></script>
<style scoped>
    .container{
        width:100vw;
        position: relative;
    }
    .start{
        width:41.3vw;
        position: absolute;
        top:109vw;
        left: 29.35vw;
    }
    .rule_button{
        position: absolute;
        top:122vw;
        width:41.3vw;
        left: 29.35vw;
    }
    .rule{
        display: none;
    }
    .rule_info{
        width:72.4vw;
        position: absolute;
        top:27.7vw;
        left:13.8vw;
    }
    .close{
        position: absolute;
        top:29.6vw;
        left:80vw;
        width:4.1vw;
    }
</style>
<template>
    <div class="index">
        <div class="container">
            <img class="img-responsive" src="http://static.bestpeng.com/static/images/index_bg.jpg" alt="">
            <router-link to="/Answer"><img class="start" src="http://static.bestpeng.com/static/images/index_start.png" alt=""></router-link>
            <img class="rule_button" @click="showRule" src="http://static.bestpeng.com/static/images/index_rule.png" alt="">
            <div class="rule shade">
                <img class="rule_info" src="http://static.bestpeng.com/static/images/index_rule_info.png" alt="">
                <img class="close" @click="close" src="http://static.bestpeng.com/static/images/close.png" alt="">
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Index',
        data () {
            return {

            }
        },
        mounted (){

        },
        methods : {
            close : () => {
                $('.shade').hide()

            },
            showRule : () => {
                $('.rule').show()
            }
        }
    }
</script>